<!DOCTYPE html>
<html lang="en">

<head>
          <meta charset="UTF-8">
          <title>表单注册</title>
          <style>
          body {
                    margin: 0;
                    padding: 0;
                    background-color: #F7F7F7;
          }
          
          ul {
                    margin: 0;
                    padding: 50px;
                    list-style: none;
          }
          
          .register {
                    width: 800px;
                    margin: 50px auto;
                    background-color: #FFF;
                    border: 1px solid #CCC;
                    border-radius: 5px;
          }
          
          li {
                    display: flex;
                    margin: 20px 0;
          }
          
          label,
          input {
                    display: block;
                    float: left;
                    height: 46px;
                    font-size: 24px;
                    box-sizing: border-box;
                    color: #333;
          }
          
          label {
                    width: 200px;
                    line-height: 46px;
                    margin-right: 30px;
                    text-align: right;
          }
          
          input {
                    width: 320px;
                    padding: 8px;
                    line-height: 1;
                    outline: none;
                    position: relative;
          }
          
          input.code {
                    width: 120px;
          }
          
          input.verify {
                    width: 190px;
                    margin-left: 10px;
          }
          
          input.disabled {
                    background-color: #CCC !important;
          }
          
          input[type=button] {
                    border: none;
                    color: #FFF;
                    background-color: #E64145;
                    border-radius: 4px;
                    cursor: pointer;
          }
          
          .tips {
                    position: fixed;
                    top: 0;
                    width: 100%;
                    height: 40px;
                    text-align: center;
          }
          
          .tips p {
                    min-width: 300px;
                    max-width: 400px;
                    line-height: 40px;
                    margin: 0 auto;
                    color: #FFF;
                    display: none;
                    background-color: #C91623;
          }
          </style>
</head>
<body>
          <div class="register">
               <form id="ajaxForm">
                    <ul>
                        <li>
                                   <label for="">验证手机</label>
                                   <input type="text" name="mobile" class="mobile">
                         </li>
                         <li>
                                   <label for="">短信验证码</label>
                                   <input type="text" name="code" class="code">
                                   <input type="button" value="获取验证码" class="verify">
                         </li>
                         <li>
                                   <label for="">请设置密码</label>
                                   <input type="password" name="pass" class="pass" id="pwd">
                         </li>
                         <li>
                                   <label for="">请确认密码</label>
                                   <input type="password" name="repass" class="repass" id="repwd">
                         </li>
                         <li>
                                   <label for="">验证码</label>
                                   <input type="text" name="code" class="code">
                                   <input type="button" value="获取验证码" class="verify">
                         </li>
                         
                         <li>
                                   <label for=""></label>
                                   <input type="button" class="submit" value="立即注册">
                         </li>
                    </ul>
               </form>
          </div>
          <!-- 提示信息 -->
          <div class="tips">
                    <p>用户名不能为空</p>
          </div>
</body>

</html>
<script type="text/javascript" src='js/jquery-1.11.0.js'></script>
<script type="text/javascript">

   	$(".submit").click(function () {
   		var pwd = $("#pwd").val();
   		var repwd = $("#repwd").val();
   		 var   re =/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,16}$/;
   		 var result=  re.test(pwd);
   		if(pwd!=''){
   			 if(result)
        {
           if(pwd==repwd){
           	alert("正确！")
           }else{
           	alert("两次密码输入是不一致的！")
           }
        }else
        {
            alert("密码至少包含大写字母，小写字母，数字，且不少于6位");
        }
   			
   		}else{
   			alert("密码必须填写！")
   			return;
   		}
   	})
   	
   $(function(){
       //逻辑1：验证用户名是否为空
     //1.用户名文本框失去焦点时发送ajax请求 2.根据服务器返回的值确定是否可以使用该用户名
     $(".name").blur(function(){
          var value=$(this).val();
          $.ajax({
               url:'01.register_userName.php',
               type:'post',
               data:{name:value},
               success:function(data){
                    if (data=='用户名已经被使用了，不好意思') {
                         $('.tips p').text(data).fadeIn(1000).delay(2000).fadeOut(1000);
                    }else{
                         $('.tips p').text(data).fadeIn(1000).delay(2000).fadeOut(1000);
                    }
               } 
          })
     })

     //逻辑2：点击注册按钮，如果手机号为空，提示用户输入正确的值，并且阻止ajax请求
     $(".verify").on('click',function(){
          //获取手机号文本框的值
          var phoneNum=$(".code").val();
          //发送ajax
          $.ajax({
               url:'',
               beforeSend:function(){
                      if(phoneNum==''){
                          $('.tips p').text('请正确输入手机号').fadeIn(1000).fadeOut(1000,function(){
                              $(".code").focus();
                          });

                         //阻止请求
                         return false;
                    }
               },
               success:function(data){

               },
               data:{num:phoneNum},
               type:'post'
          })
     })
   })
</script> 
